Stencil: TypeScript Web Komponent Kompilyatoriga Chuqur Kirish

Doimiy rivojlanib borayotgan web-ishlab chiqish sohasida qayta foydalanish mumkin bo'lgan, kengaytiriladigan va qo'llab-quvvatlanadigan komponentlarga bo'lgan ehtiyoj juda muhim. Stencil, TypeScript kompilyatori, ishlab chiquvchilarga turli freymvorklar bilan muammosiz integratsiyalashadigan yoki hatto mustaqil elementlar sifatida ishlay oladigan Web Komponentlarni yaratish imkonini berib, bu ehtiyojni qondirish uchun kuchli vosita sifatida namoyon bo'ladi.

Web Komponentlar nima?

Stencilga kirishishdan oldin, u qurilgan poydevorni tushunib olaylik: Web Komponentlar. Web Komponentlar - bu sizga o'ralgan uslub va xulq-atvorga ega bo'lgan qayta ishlatiladigan maxsus HTML elementlarini yaratishga imkon beruvchi web platforma API'lari to'plamidir. Bu siz o'zingizning <my-component> kabi teglaringizni aniqlab, ularni qaysi freymvorkdan foydalanayotganingizdan (yoki foydalanmayotganingizdan) qat'i nazar, o'z web-ilovalaringizda ishlatishingiz mumkinligini anglatadi.

Web Komponentlarning asosiy texnologiyalari quyidagilarni o'z ichiga oladi:

• Maxsus Elementlar (Custom Elements): O'zingizning HTML elementlaringizni aniqlashga imkon beradi.
• Soya DOM (Shadow DOM): Komponentning uslubi va xulq-atvori sahifaning qolgan qismiga xalaqit bermasligini ta'minlab, inkapsulyatsiyani taqdim etadi.
• HTML Andozalari (HTML Templates): Qayta foydalanish mumkin bo'lgan HTML tuzilmalarini aniqlash usulini taklif etadi.

Stencil bilan tanishuv

Stencil - bu Web Komponentlarni yaratadigan kompilyator. U Ionic jamoasi tomonidan yaratilgan va TypeScript, JSX hamda zamonaviy web standartlaridan foydalanib, yuqori darajada optimallashtirilgan va samarali komponentlarni yaratadi. Stencil shunchaki kodni kompilyatsiya qilishdan tashqari, Web Komponentlarni yaratish va qo'llab-quvvatlashni osonroq va samaraliroq qiladigan bir nechta asosiy xususiyatlarni qo'shadi.

Stencilning Asosiy Xususiyatlari va Afzalliklari

1. TypeScript va JSXni Qo'llab-quvvatlash

Stencil TypeScriptni qo'llab-quvvatlaydi, bu esa kuchli tiplashtirish, kodni yaxshiroq tashkil etish va ishlab chiquvchilarning unumdorligini oshirish imkonini beradi. JSXdan foydalanish komponentning UI'sini deklarativ va intuitiv tarzda aniqlashga imkon beradi.

Misol:

Stencil'da yozilgan oddiy hisoblagich komponentini ko'rib chiqaylik:

            
import { Component, State, h } from '@stencil/core';

@Component({
  tag: 'my-counter',
  styleUrl: 'my-counter.css',
  shadow: true
})
export class MyCounter {
  @State() count: number = 0;

  increment() {
    this.count++;
  }

  render() {
    return (
      <div class="counter-container">
        <p>Count: {this.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

            

              
                Copy
              
            
          

2. Reaktiv Ma'lumotlarni Bog'lash

Stencil komponent holatini boshqarish va UI'ni reaktiv ravishda yangilashning oddiy usulini taklif etadi. @State dekoratoridan foydalanib, komponent holatidagi o'zgarishlar avtomatik ravishda qayta renderlashni ishga tushiradi va UI har doim ma'lumotlar bilan sinxron bo'lishini ta'minlaydi.

Misol:

Yuqoridagi hisoblagich misolida @State() count: number = 0; e'loni count o'zgaruvchisini reaktiv qiladi. Har safar increment() funksiyasi chaqirilganda, count o'zgaruvchisi yangilanadi va komponent yangi qiymatni aks ettirish uchun qayta renderlanadi.

3. Virtual DOM va Samarali Renderlash

Stencil renderlash samaradorligini optimallashtirish uchun virtual DOMdan foydalanadi. O'zgarishlar avval virtual DOMga qo'llaniladi, so'ngra faqat kerakli yangilanishlar haqiqiy DOMga qo'llaniladi, bu esa qimmat DOM manipulyatsiyalarini kamaytiradi.

4. Oldindan Kompilyatsiya (AOT)

Stencil AOT kompilyatsiyasini amalga oshiradi, ya'ni kod ish vaqtida emas, balki qurish jarayonida kompilyatsiya qilinadi. Bu dastlabki yuklanish vaqtining tezroq bo'lishiga va ish vaqtidagi samaradorlikning yaxshilanishiga olib keladi.

5. Erta Yuklash (Lazy Loading)

Komponentlar sukut bo'yicha "lazy-loaded" qilinadi, ya'ni ular faqat kerak bo'lganda yuklanadi. Bu sahifaning dastlabki yuklanish vaqtini qisqartirishga va ilovaning umumiy samaradorligini oshirishga yordam beradi.

6. Freymvorklararo Moslashuvchanlik

Stencilning asosiy afzalliklaridan biri bu uning React, Angular, Vue.js va hatto oddiy HTML kabi turli freymvorklar bilan mos keladigan Web Komponentlarni yaratish qobiliyatidir. Bu sizga bir marta komponent kutubxonasini yaratish va uni ishlatilayotgan freymvorkdan qat'i nazar, bir nechta loyihalarda qayta ishlatish imkonini beradi.

7. Progressiv Web Ilovalarni (PWA) Qo'llab-quvvatlash

Stencil PWA'lar uchun o'rnatilgan qo'llab-quvvatlashni ta'minlaydi, bu esa o'rnatiladigan, ishonchli va jalb qiluvchi web-ilovalarni yaratishni osonlashtiradi. U xizmat ko'rsatuvchi ishchi (service worker) yaratish va manifestni qo'llab-quvvatlash kabi xususiyatlarni o'z ichiga oladi.

8. Kichik To'plam (Bundle) Hajmlari

Stencil kichik to'plam hajmlarini ishlab chiqarish uchun mo'ljallangan, bu sizning komponentlaringizning tez va samarali yuklanishini ta'minlaydi. Bunga "tree-shaking" va kodni bo'lish kabi usullar orqali erishiladi.

9. Asboblar va Ishlab Chiqish Tajribasi

Stencil ishlab chiqish tajribasini yaxshilaydigan boy vositalar va xususiyatlar to'plamini taklif etadi, jumladan:

• Tezkor Modulni Almashtirish (HMR): Sahifani yangilamasdan komponentlaringizdagi o'zgarishlarni real vaqtda ko'rish imkonini beradi.
• Nosozliklarni Tuzatishni Qo'llab-quvvatlash: Brauzerda komponentlaringizdagi nosozliklarni tuzatish uchun vositalarni taqdim etadi.
• Testlash Freymvorki: Birlik va integratsiya testlarini yozish uchun o'rnatilgan testlash freymvorkini o'z ichiga oladi.
• Hujjatlar Generatori: Komponentlaringiz uchun hujjatlarni avtomatik ravishda yaratadi.

Stencil bilan Ish Boshlash

Stencil bilan ish boshlash uchun tizimingizda Node.js va npm (yoki yarn) o'rnatilgan bo'lishi kerak. Keyin Stencil CLI'ni quyidagi buyruq yordamida global ravishda o'rnatishingiz mumkin:

            
npm install -g @stencil/core

            

              
                Copy
              
            
          

CLI o'rnatilgandan so'ng, siz stencil init buyrug'i yordamida yangi Stencil loyihasini yaratishingiz mumkin:

            
stencil init my-component-library

            

              
                Copy
              
            
          

Bu my-component-library deb nomlangan yangi katalog yaratadi va unda asosiy Stencil loyiha tuzilmasi bo'ladi. Keyin katalogga o'tib, npm start buyrug'i yordamida ishlab chiqish serverini ishga tushirishingiz mumkin:

            
cd my-component-library
npm start

            

              
                Copy
              
            
          

Bu ishlab chiqish serverini ishga tushiradi va loyihangizni web-brauzerda ochadi. Keyin src/components katalogidagi fayllarni o'zgartirib, o'zingizning Web Komponentlaringizni yaratishni boshlashingiz mumkin.

Misol: Oddiy Kiritish Komponentini Yaratish

Keling, Stencil yordamida oddiy kiritish komponentini yaratamiz. Ushbu komponent foydalanuvchilarga matn kiritish va uni sahifada ko'rsatish imkonini beradi.

1. Yangi komponent faylini yarating

src/components katalogida my-input.tsx nomli yangi fayl yarating.

2. Komponentni aniqlang

my-input.tsx fayliga quyidagi kodni qo'shing:

            
import { Component, State, h, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'my-input',
  styleUrl: 'my-input.css',
  shadow: true
})
export class MyInput {
  @State() inputValue: string = '';
  @Event() inputChanged: EventEmitter;

  handleInputChange(event: any) {
    this.inputValue = event.target.value;
    this.inputChanged.emit(this.inputValue);
  }

  render() {
    return (
      <div class="input-container">
        <input type="text" value={this.inputValue} onInput={(event) => this.handleInputChange(event)} />
        <p>You entered: {this.inputValue}</p>
      </div>
    );
  }
}

            

              
                Copy
              
            
          

Ushbu kod my-input deb nomlangan yangi komponentni aniqlaydi. Unda foydalanuvchi tomonidan kiritilgan matnni saqlaydigan inputValue holat o'zgaruvchisi mavjud. Foydalanuvchi kiritish maydoniga yozganda handleInputChange() funksiyasi chaqiriladi. Bu funksiya inputValue holat o'zgaruvchisini yangilaydi va yangi qiymat bilan inputChanged hodisasini yuboradi.

3. Uslub qo'shing

src/components katalogida my-input.css nomli yangi fayl yarating va quyidagi CSS'ni qo'shing:

            
.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  margin-bottom: 10px;
}


            

              
                Copy
              
            
          

4. Komponentni ilovangizda ishlating

Endi siz my-input komponentini ilovangizda HTML faylingizga quyidagi kodni qo'shib ishlatishingiz mumkin:

            
<my-input></my-input>

            

              
                Copy
              
            
          

Stencilning Ilg'or Konsepsiyalari

1. Komponentlar Kompozitsiyasi

Stencil murakkabroq UI'larni yaratish uchun komponentlarni bir-biriga ulashga imkon beradi. Bu komponentlarni bir-birining ichiga joylashtirish va ular o'rtasida xususiyatlar (properties) va hodisalar (events) yordamida ma'lumot uzatishni o'z ichiga oladi.

2. Xususiyatlar va Hodisalar

Xususiyatlar (Properties) ma'lumotlarni ota-komponentdan bola-komponentga uzatish uchun ishlatiladi. Ular @Prop() dekoratori yordamida aniqlanadi.

Hodisalar (Events) bola-komponentdan ota-komponentga ma'lumot uzatish uchun ishlatiladi. Ular @Event() dekoratori yordamida aniqlanadi va emit() funksiyasi yordamida yuboriladi.

3. Hayot Sikli Metodlari

Stencil komponentning hayot siklining turli bosqichlariga ulanish imkonini beruvchi bir qator hayot sikli metodlarini taqdim etadi. Bu metodlarga quyidagilar kiradi:

• componentWillLoad(): Komponent birinchi marta renderlanishidan oldin chaqiriladi.
• componentDidLoad(): Komponent birinchi marta renderlanganidan keyin chaqiriladi.
• componentWillUpdate(): Komponent yangilanishidan oldin chaqiriladi.
• componentDidUpdate(): Komponent yangilanganidan keyin chaqiriladi.
• componentWillUnload(): Komponent DOMdan olib tashlanishidan oldin chaqiriladi.

4. Testlash

Stencil Jest'ga asoslangan o'rnatilgan testlash freymvorkini taqdim etadi. Siz bu freymvorkdan komponentlaringiz uchun birlik va integratsiya testlarini yozishda foydalanishingiz mumkin. Testlash komponentlaringizning to'g'ri ishlashini ta'minlash va regressiyalarning oldini olish uchun juda muhimdir.

Stencil va Boshqa Web Komponent Freymvorklari

Stencil Web Komponentlarni yaratish uchun yagona variant bo'lmasa-da, u o'zining samaradorlikka, freymvorklararo moslashuvchanlikka va soddalashtirilgan ishlab chiquvchi tajribasiga e'tibor qaratishi bilan ajralib turadi. LitElement va Polymer kabi boshqa freymvorklar ham Web Komponentlarni ishlab chiqish uchun yechimlarni taklif qiladi, ammo Stencilning AOT kompilyatsiyasi va "lazy loading" kabi noyob xususiyatlari ba'zi stsenariylarda aniq afzalliklarni beradi.

Haqiqiy Dunyo Misollari va Qo'llanilish Holatlari

• Dizayn Tizimlari: Ko'pgina tashkilotlar o'zlarining dizayn tizimlari uchun qayta foydalanish mumkin bo'lgan komponent kutubxonalarini yaratishda Stencildan foydalanmoqdalar. Bu kutubxonalardan bir nechta loyihalar va freymvorklarda foydalanish mumkin, bu esa izchillik va qo'llab-quvvatlanuvchanlikni ta'minlaydi. Masalan, global moliyaviy muassasa o'zining turli mamlakatlardagi web-ilovalari tomonidan qo'llaniladigan dizayn tizimini yaratish uchun Stencildan foydalanishi mumkin, bu esa xalqaro mijozlar uchun bir xil brend tajribasini ta'minlaydi.
• Elektron Tijorat Platformalari: Elektron tijorat platformalari veb-saytning turli qismlariga osonlik bilan integratsiya qilinishi mumkin bo'lgan maxsus mahsulot kartalari, to'lov jarayonlari va boshqa interaktiv elementlarni yaratish uchun Stencildan foydalanishi mumkin. Global elektron tijorat kompaniyasi o'z veb-saytida turli mintaqalarda ishlatiladigan mahsulot kartasi komponentini yaratish uchun Stencildan foydalanishi mumkin, bu komponentning tilini va valyutasini foydalanuvchining joylashuviga qarab moslashtiradi.
• Kontentni Boshqarish Tizimlari (CMS): CMS platformalari sahifalarga osonlik bilan qo'shilishi mumkin bo'lgan qayta ishlatiladigan kontent bloklari va vidjetlarni yaratish uchun Stencildan foydalanishi mumkin.
• Boshqaruv Panellari va Admin Panellari: Stencil ma'lumotlarni vizualizatsiya qilish, forma kiritishlari va boshqalar uchun qayta ishlatiladigan komponentlar bilan interaktiv boshqaruv panellari va admin panellarini yaratish uchun ishlatilishi mumkin.

Xulosa

Stencil - bu Web Komponentlarni yaratish uchun kuchli va ko'p qirrali vosita. Uning samaradorlikka, freymvorklararo moslashuvchanlikka va ajoyib ishlab chiquvchi tajribasiga e'tibor qaratishi uni zamonaviy web-ilovalar uchun qayta foydalanish mumkin bo'lgan UI komponentlarini yaratish uchun ajoyib tanlovga aylantiradi. Dizayn tizimi, elektron tijorat platformasi yoki oddiy veb-sayt quryapsizmi, Stencil sizga ilovangizning samaradorligi va qo'llab-quvvatlanuvchanligini yaxshilaydigan kengaytiriladigan va barqaror komponentlarni yaratishga yordam beradi. Web Komponentlarni qabul qilish va Stencilning xususiyatlaridan foydalanish orqali ishlab chiquvchilar yanada mustahkam, moslashuvchan va kelajakka mo'ljallangan web-ilovalarni yaratishlari mumkin.

Web-ishlab chiqish landshafti rivojlanishda davom etar ekan, Stencil UI ishlab chiqish kelajagini shakllantirishda muhim rol o'ynashga tayyor. Uning web standartlariga sodiqligi, samaradorlikni optimallashtirish va ijobiy ishlab chiquvchi tajribasi uni yuqori sifatli Web Komponentlarni yaratishni istagan har qanday web-ishlab chiquvchi uchun qimmatli vositaga aylantiradi.